<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:600px;
				overflow: hidden;
				border:1px solid red;
			}
			#box div{
				float:left;
				border:1px solid red;
			}
			#box .b1{
				width:100px;
				height:300px;

			}
			#box .b2{
				width:490px;
				height:50px;
			}
			#box .b3{
				width:100px;
				height:100px;
			}
			#box .b4{
				width:240px;
				height:100px;
			}
			/*#box .b1 .y{
				clear: both;
				background: blue;
				width: 100px;
				height: 100px;
			}*/
			
			ul{
				width:600px;
				border:1px solid black;
				margin:0 auto;
				overflow: hidden;
			}
			ul li{
				width:98px;
				height:100px;
				border:1px solid red;
				float:left;
			}
			ul .l3{
				height:120px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="b1">
				<div class="y">12</div>
				<div class="y">13</div>
				<div class="y">14</div>
			</div>
			<div class="b2">
				2
			</div>
			<div class="b3">
				3
			</div>
			<div class="b4">
				4
			</div>
			
		</div>
		
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li class="l3">3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
		</ul>
	</body>
</html>
